<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
  <script>
    function jsbl(){
      var liarry=document.getElementsByTagName("li");

      for (var i = 0; i <liarry.length ; i++) {
        if("西红柿"==liarry[i].innerHTML){
          continue;
        }
        alert( liarry[i].innerHTML)
      }
    }

    //第一参数 代表的是角标 第二个参数代表的是 当前的元素 ==this  它也是一个js的对象
    function jqbl1(){
      $("li").each(function (){
         // this js对象  html()  text()  true  continue  false break;
        if("西红柿"===$(this).html()){
          return true;
        }
       alert($(this).html());
      });
    }

  function jqbl3(){
      $("li").each(function (i,e){
           console.log("当前第"+i+"元素,元素里面的内容是:"+e.innerHTML);
      });
  }


    function jqbl2(){
      var liarry=$("li");
      liarry.each(function (i,e){
        alert($(e).html());
        if(i==3){
          $(liarry[i]).css("backgroundColor","hotpink");
        }
      })
    }

    function jqbl4(){
      $.each($("li"),function (i,e){
        alert($(this).html());
      });
    }
    function jqbl5(){
      for(var e of $("li")){
        alert($(e).html());
      }
    }

  </script>
</head>
<body>
<ul>
  <li>苹果</li>
  <li>西瓜</li>
  <li>葡萄</li>
  <li>西红柿</li>
  <li>樱桃</li>
  <li>草莓</li>
  <li>芒果</li>
</ul>
<a href="javascript:void(0)" onclick="jsbl();">js遍历</a> <br/>
<a href="javascript:void(0)" onclick="jqbl1();">jq遍历jq.each</a> <br/>
<a href="javascript:void(0)" onclick="jqbl3();">jq遍历jq.each带参数</a> <br/>
<a href="javascript:void(0)" onclick="jqbl2();">jq遍历jq.each 带有索引参数</a> <br/>
<a href="javascript:void(0)" onclick="jqbl4();">jq遍历$.each 元素的遍历</a> <br/>
<a href="javascript:void(0)" onclick="jqbl5();">jq遍历$.each 元素的遍历</a> <br/>

</body>
</html>